<template>
  <div class="dashboard-container">
    <div class="dashboard-text">

      <div class="box-header">
        <div id="one"  class="home-box"></div>
        <div ref="two"  class="home-box"></div>

      </div>

      <div class="box-footer">
        <div ref="three"  class="home-box"></div>
        <div ref="four"  class="home-box"></div>
      </div>

      <div class="home-cord">
        <el-card :body-style="{ padding: '0px' }">
          <img :src="company.companyAvatar" class="image" alt="" style="width:100%;height:250px">
          <div style="padding: 14px;">
            <div class="home-text">{{ company.companyName }}</div>
            <div class="home-text">{{ company.ceo }}</div>
            <div class="home-text"> {{ company.ceoPhone }}</div>
            <div class="home-text">{{ company.description }}</div>
          </div>
        </el-card>
      </div>
    </div>



  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import * as echarts from 'echarts';
import {getCompany} from "@/api/company";

export default {
  name: 'Home',
  data(){
    return{
      company:{}
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  methods: {
    one(){
      let myChart = echarts.init(document.getElementById('one'));
      let option = {
        title: {
          text: '人才数量'
        },
        tooltip: {},
        legend: {
          data: ['入职']
        },
        xAxis: {
          data: ['六月','七月','八月', '九月', '十月', '十一月', '十二月','一月', '二月', '三月', '四月', '五月']
        },
        yAxis: {},
        series: [
          {
            name: '入职数量',
            type: 'bar',
            data: [10,2,13,12,22,25,31,5, 20, 36, 10, 10]
          }
        ]
      };
      myChart.setOption(option);
    },
    two(){
      const div = this.$refs.two
      let myChart = echarts.init(div);
      let option;

      option = {
        legend: {
          top: 'bottom'
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: false, readOnly: false },
            restore: { show: false },
            saveAsImage: { show: false }
          }
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [50, 200],
            center: ['50%', '40%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              { value: 40, name: 'java开发' },
              { value: 38, name: '前端开发' },
              { value: 32, name: '测试' },
              { value: 30, name: '运维' },
              { value: 28, name: '产品经理' },
              { value: 26, name: '销售' }
            ]
          }
        ]
      };

      option && myChart.setOption(option);
    },
    three(){
      const chartDom = this.$refs.three
      const myChart = echarts.init(chartDom);
      const option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [1, 5, 10, 2, 4, 13, 7],
            type: 'line'
          }
        ]
      };

      option && myChart.setOption(option);
    },
    four(){
      const chartDom =this.$refs.four
      const myChart = echarts.init(chartDom);
      const option = {
        dataset: {
          source: [
            ['score', 'amount', 'product'],
            [89.3, 20212, 'Java开发'],
            [57.1, 18254, '前端开发'],
            [74.4, 11032, '测试'],
            [50.1, 12755, '运维'],
            [89.7, 8755, '销售'],
            [68.1, 29145, '产品经理']
          ]
        },
        grid: { containLabel: true },
        xAxis: { name: '平均薪资' },
        yAxis: { type: 'category' },
        visualMap: {
          orient: 'horizontal',
          left: 'center',
          min: 10,
          max: 100,
          text: ['颜色暗', '颜色亮'],
          dimension: 0,
          inRange: {
            color: ['#65B581', '#FFCE34', '#FD665F']
          }
        },
        series: [
          {
            type: 'bar',
            encode: {
              x: 'amount',
              y: 'product'
            }
          }
        ]
      };

      option && myChart.setOption(option);


    },

    async showCompanyInfo(){
      const {data:res} = await getCompany()
      this.company = res.data
    }

  },
  mounted() {
    this.one()
    this.two()
    this.three()
    this.four()
  },
  created() {
    this.showCompanyInfo()
  }

}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    position: absolute;
    height:100%;
    width: 100%;
    background-color:cornsilk;
  }
  &-text {
    margin:50px;
    font-size: 16px;
    line-height: 46px;
  }
}

.box{
  &-footer{
    padding-top:200px
  }
}

.home{
  &-box{
    width: 40%;
    height:400px;
    float: left;
    display: inline-block;
  }
  &-cord{
    position: absolute;
    right:10px;
    top:20%;
    margin-right: 5%;
  }
  &-text{
    text-align: center;
  }
}


</style>
